<template>
  <u-form labelWidth="auto" disabled>
    <view class="basic-style">
      <u-form-item label="物料大类" prop="provisionBroad" required>
        <h-dropdown
          border="none"
          disabled
          class="w-100"
          keyName="categoryName"
          placeholder="请选择"
          :api="api.queryProvisionBroadList"
          v-model="item.provisionBroad"
          dataKey="result"
          @change="exportWarehouseChange"
        />
      </u-form-item>
      <u-form-item label="物料小类" prop="provisionSmall" required>
        <h-dropdown
          border="none"
          disabled
          class="w-100"
          keyName="categoryName"
          placeholder="请选择"
          :columns="smallList"
          v-model="item.provisionSmall"
          dataKey="result"
          @change="provisionSmallChange"
        />
      </u-form-item>
      <u-form-item label="物料编号" prop="materialBillId">
        <u--input border="none" disabled placeholder="请输入物料编号" v-model="item.materialBillId"></u--input>
      </u-form-item>
      <u-form-item label="物料名称" prop="materialName" required>
        <h-select-material-input-popup
          disabled
          style="width: 100%"
          v-model="item.materialName"
          placeholder="请选择物料名称"
          border="none"
          :materialFlag="true"
          auditStatus="2"
          :provisionSmall="item.provisionSmall"
          @change="materialNameBack"
        ></h-select-material-input-popup>
      </u-form-item>
      <u-form-item label="规格型号" prop="specification">
        <u--input border="none" disabled placeholder="请输入规格型号" v-model="item.specification"></u--input>
      </u-form-item>
      <u-form-item label="单位" prop="unit">
        <h-select-input-tag
          disabled
          class="w-100"
          v-model="item.unit"
          objectField="item.unit"
          placeholder="请选择单位"
          border="none"
          dictName="unit_type"
        ></h-select-input-tag>
      </u-form-item>
      <u-form-item label="供应商" prop="companName">
        <h-select-customer-input-popup
          disabled
          style="width: 100%"
          v-model="item.companName"
          objectField="item.companName"
          commercialType="2"
          placeholder="请选择供应商"
          border="none"
        ></h-select-customer-input-popup>
      </u-form-item>
      <u-form-item label="品牌" prop="brand">
        <u--input border="none" disabled placeholder="请输入品牌" v-model="item.brand"></u--input>
      </u-form-item>
      <u-form-item label="领用数量" prop="recipientsNum" required>
        <u--input border="none" disabled type="number" v-number-normal placeholder="请输入数量" v-model="item.recipientsNum"></u--input>
      </u-form-item>

      <u-form-item label="物料用途" prop="remark">
        <u--textarea border="none" disabled confirm-type="send" v-model="item.remark" placeholder="请输入物料用途"></u--textarea>
      </u-form-item>
    </view>

    <view class="trip-form-action flex space-x-1">
      <view @click.stop.prevent="handleCopyForm(item)">
        <u-button size="small" type="primary">复制</u-button>
      </view>
      <view @click.stop.prevent="handleEidtForm(item)">
        <u-button size="small" type="primary">修改</u-button>
      </view>
      <view @click.stop.prevent="handleRemoveForm(item)">
        <u-button size="small" type="error">删除</u-button>
      </view>
    </view>
  </u-form>
</template>

<script>
import { queryByDepartment, queryProvisionBroadList, queryProvisionSmallList } from '@/api/purchase/ErpPurchaseCannibalizeForm'
import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
export default {
  name: 'MaterialFormInfo',
  props: {
    index: {
      type: Number,
      default: null,
    },
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      filterMultiDictText,
      initDictOptions,
      dictOptions: {},
      smallList: [],
      api: {
        queryByDepartment,
        queryProvisionBroadList,
      },
    }
  },
  watch: {
    item: {
      handler(val) {
        if (val && val.provisionBroad) {
          this.initSmallType()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    initSmallType() {
      this.exportWarehouseChange(this.item.provisionBroad)
    },
    exportWarehouseChange(id) {
      // this.provisionSmallChange()
      this.smallList = []
      if (id) {
        this.findProvisionSmallList(id)
      }
    },
    findProvisionSmallList(value) {
      const parentId = value
      queryProvisionSmallList({ parentId }).then((res) => {
        if (res.success) {
          const data = res.result.map((item) => {
            return { id: item.id, categoryName: item.categoryName }
          })
          this.smallList = [data]
        } else {
          this.$u.toast(res.message)
        }
      })
    },
    handleCopyForm(item) {
      this.$emit('copy', [item, this.index])
    },
    handleEidtForm(item) {
      this.$emit('edit', [item, this.index])
    },
    handleRemoveForm(item) {
      this.$emit('remove', item)
    },
  },
}
</script>

<style scoped lang="scss">
.inforamtion {
  margin-top: 10rpx;
  padding: 10rpx;
  border-radius: 15rpx;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
}
</style>
